@import "./vars.scss";
.big-sereen-container {
	width: 100%;
	height: 100%;
	background-image: url("@public/images/decoration/power/13.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	.top-title-bg {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: $top-height;
		text-align: center;
		background-image: url("@public/images/decoration/power/17.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		.top-system-title {
			margin-top: -10px;
			font-size: 24px;
			font-weight: 900;
			color: $block-title;
			text-shadow: 0 4px 6px #071c3799;
			letter-spacing: 6px;
		}
		.timer {
			margin: 0 0 24px 20px;
			font-family: "PingFang SC Medium";
			font-size: 16px;
			font-weight: 500;
			color: #ffffff;
			text-align: left;
		}
		.r {
			display: flex;
			align-items: center;
			height: 100%;
			margin: 0 20px 24px 0;
			cursor: pointer;
			p {
				font-family: "PingFang SC Medium";
				font-size: 16px;
				font-weight: 500;
				color: #ffffff;
				text-align: center;
			}
			img {
				width: 14px;
				height: 14px;
				margin-left: 16px;
			}
		}
	}
	.main {
		display: flex;
		height: calc(100% - $top-height - 20px);
		padding: 10px 30px;
		* {
			box-sizing: border-box;
		}
		.title-block {
			display: flex;
			align-items: center;
			width: 214px;
			height: $block-title-height;
			background-image: url("@public/images/decoration/power/2.png");
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			.text {
				padding-left: 35px;
				font-size: 18px;
				font-weight: 900;
				color: $block-title;
				text-align: left;
			}
		}
		.left {
			width: 452px;
			height: 100%;
			.left-item {
				&:first-child {
					height: 218px;
				}
				&:nth-child(2) {
					height: 268px;
				}
				&:nth-child(3) {
					height: 252px;
				}
				&:last-child {
					height: 256px;
				}

				// background: #071c3799;
				// height: 25%;
			}
			.pd {
				margin-bottom: 20px;
			}
		}
		.center {
			flex: 1;
			.master-contain {
				width: 100%;
				height: 100%;
				.total-panel {
					height: 98px;
				}
				.topo-panel {
					width: 100%;
					height: 512px;
					margin-top: 0;
				}
				.device-panel {
					height: 47px;
				}
				.bottom {
					height: 347px;
					.grid {
						padding-top: 40px !important;
					}
				}
			}
		}
		.right {
			width: 440px;
			height: 100%;
			.right-item {
				&:first-child {
					height: 255px;
				}
				&:nth-child(2) {
					height: 442px;
				}
				&:nth-child(3) {
					height: 298px;
				}

				// background: #071c3799;
				// height: 25%;
			}

			// .right-item.right-list {
			// 	height: 45%;
			// }
			.right-item.right-video {
				width: 100%;
				.video-contain {
					width: 100%;
					height: calc(100% - $block-title-height);

					// padding: 20px 0 12px 20px;
				}
			}
		}
	}
}
